<template>
  <button
    class="github-login-btn"
    :class="{ 'github-login-btn--loading': loading }"
    :disabled="loading"
    @click="handleGithubLogin"
  >
    <div class="github-login-btn__content">
      <i class="fab fa-github" alt="GitHub登录"></i>
      <span v-if="loading" class="github-login-btn__loading">登录中...</span>
      <span v-else class="github-login-btn__text">GitHub登录</span>
    </div>
  </button>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { debounce } from 'lodash-es';
import { ref } from 'vue';

const loading = ref(false);

// GitHub登录配置
const GITHUB_CLIENT_ID = import.meta.env.VITE_GITHUB_CLIENT_ID;
const GITHUB_REDIRECT_URI = import.meta.env.VITE_GITHUB_REDIRECT_URI;

// 验证GitHub登录配置
const validateGithubConfig = (): boolean => {
  if (!GITHUB_CLIENT_ID) {
    ElMessage.error('GitHub登录配置错误：缺少CLIENT_ID');
    return false;
  }

  if (!GITHUB_REDIRECT_URI) {
    ElMessage.error('GitHub登录配置错误：缺少REDIRECT_URI');
    return false;
  }

  return true;
};

// 执行GitHub登录 - 直接重定向模式
const executeGithubLogin = () => {
  if (!validateGithubConfig()) {
    return;
  }

  if (loading.value) {
    ElMessage.warning('正在处理登录请求，请稍候...');
    return;
  }

  try {
    // 生成随机state用于安全验证
    const state = Math.random().toString(36).substring(7);
    localStorage.setItem('github_login_state', state);

    // 构建GitHub OAuth授权URL
    const githubAuthUrl = new URL('https://github.com/login/oauth/authorize');
    githubAuthUrl.searchParams.set('client_id', GITHUB_CLIENT_ID);
    githubAuthUrl.searchParams.set('redirect_uri', GITHUB_REDIRECT_URI);
    githubAuthUrl.searchParams.set('state', state);
    githubAuthUrl.searchParams.set('scope', 'user:email');

    console.log('GitHub OAuth 跳转URL:', githubAuthUrl.toString());

    ElMessage.info('正在跳转到GitHub授权页面...');

    // 直接重定向到GitHub授权页面
    window.location.href = githubAuthUrl.toString();
  } catch (error) {
    console.error('GitHub登录跳转失败:', error);
    ElMessage.error('GitHub登录跳转失败，请重试');
    loading.value = false;
  }
};

// 使用lodash的防抖包装的登录函数
const handleGithubLogin = debounce(executeGithubLogin, 300);
</script>

<style lang="scss" scoped>
.github-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 40px;
  padding: 8px 12px;
  margin: 0;
  border: 1px solid #333;
  border-radius: 4px;
  background: #333;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(51, 51, 51, 0.2);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(51, 51, 51, 0.3);
    border-color: #555;
    background: #555;

    &::before {
      left: 100%;
    }
  }

  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(51, 51, 51, 0.2);
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: 0 2px 4px rgba(51, 51, 51, 0.1);

    &::before {
      display: none;
    }
  }

  &--loading {
    pointer-events: none;
  }

  &__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
  }

  i {
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__text,
  &__loading {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    color: inherit;
  }

  &__loading {
    display: flex;
    align-items: center;
    gap: 6px;

    &::after {
      content: '';
      width: 14px;
      height: 14px;
      border: 1.5px solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .github-login-btn {
    min-width: 110px;
    height: 36px;
    padding: 6px 10px;
    font-size: 13px;

    i {
      font-size: 18px;
      width: 18px;
      height: 18px;
    }

    &__text,
    &__loading {
      font-size: 13px;
    }
  }
}
</style>
